<template>
    <div class="page" v-show="hotSongs">
        <head-item :title="title"></head-item>
        <v-item :title="'热门歌曲'" :data="hotSongs">
            <img src="../../assets/images/icons/recmd@2x.png" 
            class="slot-icon" slot="icon">
        </v-item>

        <v-item :title="'最新音乐'" :data="newSongs">
            <img src="../../assets/images/icons/newest@2x.png" 
            class="slot-icon" slot="icon">
        </v-item>
        
        <v-item :title="'主播电台'" :data="djSongs">
            <img src="../../assets/images/icons/radio@2x.png" 
            class="slot-icon" slot="icon">
        </v-item>
    </div>
</template>

<script>
import HeadItem from '@/components/Head.vue';
import Http from '@/api/music.js'
import vItem from './components/MusicItem.vue'
    export default {
        components:{
            HeadItem,
            vItem
        },
        data(){
            return {
                title:'音乐',
                hotSongs:[],
                newSongs:[],
                djSongs:[]
            }
        },
        async mounted() {
          let hotSongs = await Http.getHotsongs();
          let newSongs = await Http.getJapaneseSongs();
          let djSongs = await Http.getRecommendDj();
          let songs = [];
          djSongs.result.forEach(item=>{
                let obj = {};
                obj.id = item.id;
                obj.name = item.name;
                obj.coverImgUrl = item.picUrl;
                obj.playCount = item.program.adjustedPlayCount;
                songs.push(obj);
          });
          this.hotSongs = hotSongs.playlists.slice(0,3);
          this.newSongs = newSongs.playlists.slice(0,3);
          this.djSongs = songs.slice(0,3);
        },
    }
</script>

<style lang="less" scoped>
@top:46px;
@bottom:50px;
    .page{
        padding-top: @top;
        padding-bottom: @bottom;
    }
    .slot-icon{
        width: 18px;
        padding-right: 2px;
        margin-top: 2px;
    }
</style>